<script setup>
import { computed } from 'vue'

// Props定义
const props = defineProps({
  // 按钮类型
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'primary', 'danger', 'success', 'warning'].includes(value)
  },
  // 按钮尺寸
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 是否圆角
  rounded: {
    type: Boolean,
    default: false
  },
  // 图标
  icon: {
    type: String,
    default: ''
  },
  // 宽度
  width: {
    type: String,
    default: 'auto'
  }
})

// 事件定义
const emit = defineEmits(['click'])

// 计算CSS类名
const buttonClasses = computed(() => {
  return [
    'base-button',
    `base-button--${props.type}`,
    `base-button--${props.size}`,
    {
      'base-button--rounded': props.rounded,
      'base-button--disabled': props.disabled,
      'base-button--loading': props.loading
    }
  ]
})

// 计算样式
const buttonStyles = computed(() => {
  return {
    width: props.width
  }
})

// 处理点击事件
const handleClick = (event) => {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>

<template>
  <button
    :class="buttonClasses"
    :style="buttonStyles"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <span v-if="loading" class="button-loading">⏳</span>
    <span v-else-if="icon" class="button-icon">{{ icon }}</span>
    <span class="button-content"><slot></slot></span>
  </button>
</template>

<style scoped>
.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
  font-family: inherit;
}

/* 按钮类型样式 */
.base-button--default {
  background-color: #fff;
  color: #333;
  border: 1px solid #e5e5e5;
}

.base-button--default:hover:not(:disabled) {
  background-color: #f8f9fa;
  border-color: #4c6ef5;
  color: #4c6ef5;
}

.base-button--primary {
  background-color: #4c6ef5;
  color: white;
  border: 1px solid #4c6ef5;
}

.base-button--primary:hover:not(:disabled) {
  background-color: #3b5bdb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 110, 245, 0.3);
}

.base-button--danger {
  background-color: #ff6b35;
  color: white;
  border: 1px solid #ff6b35;
}

.base-button--danger:hover:not(:disabled) {
  background-color: #ff8557;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.base-button--success {
  background-color: #51cf66;
  color: white;
  border: 1px solid #51cf66;
}

.base-button--success:hover:not(:disabled) {
  background-color: #40c057;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(81, 207, 102, 0.3);
}

.base-button--warning {
  background-color: #ffd43b;
  color: #333;
  border: 1px solid #ffd43b;
}

.base-button--warning:hover:not(:disabled) {
  background-color: #ffc107;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 212, 59, 0.3);
}

/* 按钮尺寸 */
.base-button--small {
  padding: 6px 12px;
  font-size: 12px;
}

.base-button--medium {
  padding: 10px 20px;
  font-size: 14px;
}

.base-button--large {
  padding: 14px 28px;
  font-size: 16px;
}

/* 圆角样式 */
.base-button--rounded {
  border-radius: 28px;
}

/* 禁用状态 */
.base-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 加载状态 */
.base-button--loading {
  opacity: 0.8;
  cursor: wait;
}

.button-loading {
  animation: spin 1s linear infinite;
}

.button-icon {
  font-size: 16px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .base-button {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .base-button--large {
    padding: 12px 24px;
    font-size: 14px;
  }
}
</style>